import 'dart:math';

import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:hixing_app/assets/r_img.dart';
import 'package:hixing_app/const/gaps.dart';

class TutorialPage extends StatefulWidget {
  const TutorialPage({super.key});

  @override
  TutorialPageState createState() => TutorialPageState();
}

class TutorialPageState extends State<TutorialPage>
    with SingleTickerProviderStateMixin {
  int _counter = 0;
  TextStyle titleStyle =
      const TextStyle(fontSize: 15, fontWeight: FontWeight.bold);
  late AnimationController optCtrl =
      AnimationController(vsync: this, duration: Duration(milliseconds: 2000))
        ..repeat(reverse: true);
  bool isExpand = false;
  double _opacity = 0;

  ValueNotifier<double> opacityVal = ValueNotifier(0);
  ValueNotifier<double> colorValue = ValueNotifier(0);

  @override
  void dispose() {
    optCtrl.dispose();
    opacityVal.dispose();
    super.dispose();
  }

  @override
  void initState() {
    //启动
    // optCtrl.forward();
    // optCtrl.stop();
    // optCtrl.reverse();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    print("builder page === ");
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.red, // 设置状态栏颜色
        statusBarIconBrightness: Brightness.light, // 设置状态栏图标颜色
        systemNavigationBarColor: Colors.green, // 设置导航栏颜色
        systemNavigationBarIconBrightness: Brightness.light, // 设置导航栏图标颜色
      ),
      child: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: const Text('教程页面'),
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Container(
              width: double.infinity,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  /// 基础组件
                  _buildBase(),

                  /// 冷门组件
                  _buildCold(),

                  ///动画
                  _buildAnimation(),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  ///动画
  Widget _buildAnimation() {
    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      Text(
        "动画组件",
        style: titleStyle,
      ),
      Gaps.vGap20,
      AnimatedOpacity(
        opacity: _opacity,
        duration: Duration(milliseconds: 2000),
        child: Container(
          width: 100,
          height: 100,
          color: Colors.red,
          child: Text("瘾式动画"),
        ),
      ),
      ElevatedButton(
        onPressed: () {
          setState(() {
            _opacity = _opacity == 1 ? 0 : 1;
          });
        },
        child: Text("更新隐式动画"),
      ),
      AnimatedBuilder(
        animation: optCtrl,
        builder: (ctx, child) {
          return Opacity(
            opacity: optCtrl.value,
            child: child,
          );
        },
        child: Text("data"),
      ),
      FadeTransition(
        opacity: optCtrl.view,
        child: Container(
          width: 100,
          height: 100,
          color: Colors.red,
          child: Text("显式动画"),
        ),
      ),
      ListenableBuilder(
          listenable: opacityVal,
          builder: (ctx, child) {
            return Text("${opacityVal.value}");
          }),
      StatefulBuilder(builder: (BuildContext context, StateSetter setState) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Counter: $_counter'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _counter++;
                });
              },
              child: Text('Increment'),
            ),
          ],
        );
      }),
    ]);
  }

  /// 冷门组件
  Widget _buildCold() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Gaps.vGap20,

        Text(
          "冷门组件",
          style: titleStyle,
        ),
        Gaps.vGap20,
        ClipRect(
          child: ColorFiltered(
            colorFilter: const ColorFilter.mode(Colors.grey, BlendMode.color),
            child: SizedBox(
              width: 100,
              height: 100,
              child: Image.asset(
                /// 图片本地url
                ImgR.imgBgDog,

                ///宽度
                width: 100,

                ///高度
                height: 100,

                /// 设置图片展示的裁剪方式
                /// BoxFit.cover：裁剪铺满屏幕，不变形,BoxFit.fill 铺满，变形 ,BoxFit.contain 不变形，留白
                fit: BoxFit.fill,

                /// 模块的模块名字
                // package: "lp_app",
              ),
            ),
          ),
        ),
        // GreyImage(),
        Gaps.vGap20,
        Column(
          children: [
            KeyedSubtree(
              child: Text("keysbutree"),
            ),
            KeyedSubtree(
              child: Container(
                width: 50,
                height: 50,
                color: Colors.red,
              ),
            ),
          ],
        ),
        Gaps.vGap20,
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
          child: FractionallySizedBox(
            widthFactor: 2,
            heightFactor: 0.5,
            child: Container(
              color: Colors.green,
            ),
          ),
        ),
        Gaps.vGap20,
        Container(
          color: Colors.red,
          width: double.infinity,
          child: FittedBox(
            child: Text(
              "看看快快快快快快坎坎坷坷",
              style: TextStyle(fontSize: 12),
            ),
          ),
        ),
        Gaps.vGap20,
        RepaintBoundary(
          child: CustomPaint(
            size: Size(100, 100),
          ),
        ),
        PhysicalModel(
          color: Colors.red,
          shadowColor: Colors.red,
          elevation: 10,
          child: Image.asset(
            /// 图片本地url
            ImgR.imgBgDog,

            ///宽度
            width: 100,

            ///高度
            height: 100,

            /// 设置图片展示的裁剪方式
            /// BoxFit.cover：裁剪铺满屏幕，不变形,BoxFit.fill 铺满，变形 ,BoxFit.contain 不变形，留白
            fit: BoxFit.fill,

            /// 模块的模块名字
            // package: "lp_app",
          ),
        ),
        Gaps.vGap20,
        Container(
          width: 100,
          height: 100,
          color: Colors.green,
          child: Builder(builder: (ctx) {
            Future.microtask(() {
              // 找到当前组件的 RenderBox 对象
              RenderBox? renderBox = ctx?.findRenderObject() as RenderBox;
              if (renderBox != null) {
                // 获取实际宽度
                double width = renderBox.size.width;
              }
            });
            return Text("Builder 盒子");
          }),
        ),
      ],
    );
  }

  /// 基础组件
  Widget _buildBase() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          "基础组件",
          style: titleStyle,
        ),
        Gaps.vGap20,
        const Text(
          /// 文本内容
          "这是一个文本组件",

          /// 居中方式
          textAlign: TextAlign.center,

          style: TextStyle(
            /// 字体大小
            fontSize: 16,

            /// 字体颜色
            color: Colors.red,

            /// 文本内容中间删除线
            decoration: TextDecoration.lineThrough,

            /// 文本加粗
            fontWeight: FontWeight.bold,
          ),
        ),
        Gaps.vGap20,
        Image.asset(
          /// 图片本地url
          ImgR.imgBgDog,

          ///宽度
          width: 100,

          ///高度
          height: 100,

          /// 设置图片展示的裁剪方式
          /// BoxFit.cover：裁剪铺满屏幕，不变形,BoxFit.fill 铺满，变形 ,BoxFit.contain 不变形，留白
          fit: BoxFit.fill,

          /// 模块的模块名字
          // package: "lp_app",
        ),
        Gaps.vGap20,

        /// 绘制一个 宽高100的盒子，padding为25，子元素是一个红颜色的盒子
        const SizedBox(
          width: 100,
          height: 100,
          child: Padding(
            padding: EdgeInsets.all(25),
            child: ColoredBox(
              color: Colors.red,
            ),
          ),
        ),
        Gaps.vGap20,

        /// 绘制一个尺寸100的绿色盒子，使用Align定位红色的子组件Widget
        const SizedBox(
          width: 100,
          height: 100,
          child: ColoredBox(
            color: Colors.green,
            child: Align(
              alignment: Alignment.topLeft,
              child: SizedBox(
                width: 20,
                height: 20,
                child: ColoredBox(
                  color: Colors.red,
                ),
              ),
            ),
          ),
        ),

        Gaps.vGap20,
        Container(
          width: 100,
          height: 100,
          padding: const EdgeInsets.all(0),
          alignment: Alignment.topLeft,
          decoration: BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.circular(4),
          ),
          child: Container(
            width: 20,
            height: 20,
            color: Colors.red,
          ),
        ),
        Gaps.vGap20,
        Container(
          height: 60,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text("第一个"),
              const Text("第二个"),
              Flexible(
                flex: 1,
                child: Container(
                  color: Colors.black38,
                  alignment: Alignment.center,
                  child: const Text("Flexbale"),
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.red,
                  alignment: Alignment.center,
                  child: const Text("第三个"),
                ),
              )
            ],
          ),
        ),

        Gaps.vGap20,
        Container(
          height: 200,
          width: double.infinity,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text("第一个"),
              const Text("第二个"),
              Flexible(
                flex: 1,
                child: Container(
                  color: Colors.red,
                  alignment: Alignment.center,
                  child: const Text("Flexbale"),
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.red,
                  alignment: Alignment.center,
                  child: const Text("第三个"),
                ),
              )
            ],
          ),
        ),
        Gaps.vGap20,
        SizedBox(
          width: double.infinity,
          child: Wrap(
            alignment: WrapAlignment.start,
            runSpacing: 10,
            spacing: 10,
            children: List.generate(10, (index) {
              return Container(
                width: 50.0 + Random().nextInt(100),
                height: 30,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.red)),
                child: const Text("111"),
              );
            }),
          ),
        ),
        Gaps.vGap50,
        Stack(
          alignment: Alignment.center,
          // clipBehavior: Clip.none,
          children: [
            Container(
              width: 200,
              height: 200,
              color: Colors.red,
            ),
            Container(
              width: 60,
              height: 60,
              color: Colors.green,
              child: const Text("子组件1"),
            ),
            Positioned(
              right: -30,
              top: -30,
              child: Container(
                width: 60,
                height: 60,
                color: Colors.yellowAccent,
                child: const Text("子组件2"),
              ),
            )
          ],
        ),
        Gaps.vGap20,
        ListTile(
          onTap: () {},
          title: const Text("标题"),
          leading: const Icon(Icons.person),
          trailing: const Icon(Icons.menu),
        ),
        Card(
          elevation: 4,
          shadowColor: Colors.red,
          child: Container(
            width: 50,
            height: 50,
            alignment: Alignment.center,
            child: const Text("卡片"),
          ),
        ),
        ExpansionPanelList(
          expansionCallback: (index, expand) {
            setState(() {
              isExpand = expand;
            });
          },
          children: [
            ExpansionPanel(
              isExpanded: isExpand,
              headerBuilder: (ctx, expand) {
                return const Text("一个标题=====");
              },
              body: Container(
                width: 200,
                height: 200,
                child: const Text("展开内容======"),
              ),
            )
          ],
        ),
      ],
    );
  }
}

class GreyImage extends StatefulWidget {
  const GreyImage({super.key});

  @override
  GreyImageState createState() => GreyImageState();
}

class GreyImageState extends State<GreyImage> {
  @override
  Widget build(BuildContext context) {
    return ColorFiltered(
      colorFilter: ColorFilter.mode(Colors.grey, BlendMode.color),
      child: SizedBox(
        width: 100,
        height: 100,
        child: Image.asset(
          /// 图片本地url
          ImgR.imgBgDog,

          ///宽度
          width: 100,

          ///高度
          height: 100,

          /// 设置图片展示的裁剪方式
          /// BoxFit.cover：裁剪铺满屏幕，不变形,BoxFit.fill 铺满，变形 ,BoxFit.contain 不变形，留白
          fit: BoxFit.fill,

          /// 模块的模块名字
          // package: "lp_app",
        ),
      ),
    );
  }
}
